<template>
	<view class="content">
		<view class="navTitle">
		首页	
		</view>
		<!-- 搜索开始 -->
		<view class="search ">
			<view class="searchBox flx">
				<view class="icon">
					<i class="iconfont">&#xe614;</i>
				</view>
				<view class="inputTxt">
					<input type="text" value="" placeholder="搜索"/>
				</view>
			</view>
			
		</view>
		<!-- 搜索结束 -->
		<!-- 类别开始 -->
		<view class="category">
			<view class="caBox flx">
				<view class="catOne" @click="openinfo('../goods/goods')">
					<image src="../../static/home/homeCat1.png" mode=""></image>
					<view class="">
						商品
					</view>
				</view>
				<view class="catOne" @click="openinfo('../recruit/recruit')">
					<image src="../../static/home/homeCat2.png" mode=""></image>
					<view class=""  >
						招聘
					</view>
				</view>
				<view class="catOne">
					<image src="../../static/home/homeCat3.png" mode=""></image>
					<view class="">
						展会
					</view>
				</view>
				<view class="catOne" @click="openinfo('../rent/rent')">
					<image src="../../static/home/homeCat4.png" mode=""></image>
					<view class="">
						出租转让
					</view>
				</view>
				<view class="catOne" @click="openinfo('../agent/agent')">
					<image src="../../static/home/homeCat5.png" mode=""></image>
					<view class="">
						代理
					</view>
				</view>
				<view class="catOne" @click="openinfo('../agent/agent')">
					<image src="../../static/home/homeCat6.png" mode=""></image>
					<view class="">
                       团购
					</view>
				</view>
				<view class="catOne">
					<image src="../../static/home/homeCat7.png" mode=""></image>
					<view class="">
						活动
					</view>
				</view>
				<view class="catOne">
					<image src="../../static/home/homeCat8.png" mode=""></image>
					<view class="">
						更多
					</view>
				</view>
			</view>
		</view>
		<!-- 类别结束 -->
		<!-- 筛选开始 -->
		<view class="selectMenu flx">
			<view class="menu">
            城市切换<i class="iconfont">&#xe65b;</i>
			</view>
			<view class="menu">
			行业切换<i class="iconfont">&#xe65b;</i>
			</view>
			<view class="menu">
			类别切换<i class="iconfont">&#xe65b;</i>
			</view>
		</view>
		<!-- 筛选结束 -->
		<!-- 猜你喜欢开始 -->
		<view class="like">
			<view class="likeTitle flx">
				<view class="bg">
				</view>
				<view class="txt">
					猜你喜欢
				</view>
			</view>
			<view class="info flx">
				<view class="Img">
					<image src="../../static/indexBg2.jpg" mode=""></image>
				</view>
				<view class="contentI">
					<view class="ctitle">
						这是标题
					</view>
					<view class="ctxt">
						这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容
					</view>
					<view class="adress">
						<i class="iconfont">&#xe64e;</i>地址地址电话ID号IDhi
					</view>
				</view>
				<view class="contact">
					<button class="bbg"> 在线联系</button>
				</view>
			</view>
			<view class="info flx">
				<view class="Img">
					<image src="../../static/indexBg2.jpg" mode=""></image>
				</view>
				<view class="contentI">
					<view class="ctitle">
						这是标题
					</view>
					<view class="ctxt">
						这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容
					</view>
					<view class="adress">
						<i class="iconfont">&#xe64e;</i>地址地址电话ID号IDhi
					</view>
				</view>
				<view class="contact">
					<button class="bbg"> 在线联系</button>
				</view>
			</view>
			<view class="info flx">
				<view class="Img">
					<image src="../../static/indexBg2.jpg" mode=""></image>
				</view>
				<view class="contentI">
					<view class="ctitle">
						这是标题
					</view>
					<view class="ctxt">
						这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容
					</view>
					<view class="adress">
						<i class="iconfont">&#xe64e;</i>地址地址电话ID号IDhi
					</view>
				</view>
				<view class="contact">
					<button class="bbg"> 在线联系</button>
				</view>
			</view>
		</view>
		<!-- 猜你喜欢结束 -->
		<!-- 推荐活动开始 -->
		<view class="like focus">
			<view class="likeTitle flx">
				<view class="bg">
				</view>
				<view class="txt">
					推荐活动
				</view>
				<view class="more">
					更多>>
				</view>
			</view>
			<view class="info flx">
				<view class="Img">
					<image src="../../static/indexBg2.jpg" mode=""></image>
				</view>
				<view class="contentI">
					<view class="ctitle">
						这是标题
					</view>
					<view class="ctxt">
						这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容
					</view>
					<view class="adress flxs">
						<view class="">
							<i class="iconfont">&#xe64e;</i>杭州萧山区
						</view>
						<view class="">
							6月2日
						</view>
					</view>
				</view>
				<view class="contact">
					<button class="bbg"> 申请参加</button>
				</view>
			</view>
			<view class="info flx">
				<view class="Img">
					<image src="../../static/indexBg2.jpg" mode=""></image>
				</view>
				<view class="contentI">
					<view class="ctitle">
						这是标题
					</view>
					<view class="ctxt">
						这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容
					</view>
					<view class="adress flxs">
						<view class="">
							<i class="iconfont">&#xe64e;</i>杭州萧山区
						</view>
						<view class="">
							6月2日
						</view>
					</view>
				</view>
				<view class="contact">
					<button class="bbg"> 申请参加</button>
				</view>
			</view>
			<view class="info flx">
				<view class="Img">
					<image src="../../static/indexBg2.jpg" mode=""></image>
				</view>
				<view class="contentI">
					<view class="ctitle">
						这是标题
					</view>
					<view class="ctxt">
						这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容
					</view>
					<view class="adress flxs">
						<view class="">
							<i class="iconfont">&#xe64e;</i>杭州萧山区
						</view>
						<view class="">
							6月2日
						</view>
					</view>
				</view>
				<view class="contact">
					<button class="bbg"> 申请参加</button>
				</view>
			</view>
		</view>
		<!-- 推荐活动结束 -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
			
		},
		methods:{
			//跳转页面
		openinfo:function(url) {
		       uni.navigateTo({
		         url: url,
		         success: res => {},
		         fail: () => {},
		         complete: () => {}
		     });
		 },
		}
	}
</script>

<style>
.content{
	background: #F8F8F8;
	height: 200vh;
}
.navTitle{
	background: #FF542E;
	width: 100%;
	height: 100rpx;
	text-align: center;
	line-height: 100rpx;
	color: #fff;
	font-size: 38rpx;
}
.flx{
	display: flex;
	justify-content: flex-start;
}
.flxs{
	display: flex;
	justify-content: space-between;
	height: 35rpx;
	}
.search{
	width: 100%;
	padding:  2%;
	background: #FF542E;
	height: 90rpx;
	box-sizing: border-box;
	}
	.icon{
		margin: 0 30rpx;
		padding-top: 10rpx;
	}
	.icon .iconfont{
		margin-top: 10rpx!important;
	}
	.searchBox{
		width: 100%;
		background: #FFFFFF;
		border-radius: 30rpx;
		font-size: 30rpx;
	}
	
	.category{
		width: 100%;
		padding: 2%;
		box-sizing: border-box;
		background-image: url(../../static/home/catBg.png);
		background-size: cover;
	}
	.caBox{
		width: 100%;
		border-radius: 20rpx;
		background: #fff;
		box-shadow: 2rpx 2rpx 5rpx #888888;
		padding: 2% 3%;
		box-sizing: border-box;
		flex-wrap: wrap;
	}
	.catOne{
		text-align: center;
		font-size: 30rpx;
		width: 25%;
		margin-top: 10rpx;
	}
	.catOne image{
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
	}
	.selectMenu{
		width: 96%;
		height: 80rpx;
		line-height: 80rpx;
		margin: 0 auto;
		border-radius: 10rpx;
		background: #fff;
		margin-top: 20rpx;
		font-size: 30rpx;
		color: #676767;
	}
	.selectMenu .menu{
		width: 33%;
		padding: 0 3%;
		box-sizing: border-box;
		text-align: center;
	}
	.like{
		width: 96%;
		margin: 0 auto;
		border-radius: 10rpx;
		background: #fff;
		margin-top: 20rpx;
		padding: 3%;
		box-sizing: border-box;
	}
	.likeTitle{
		padding: 2%;
		box-sizing: border-box;
		width: 100%;
		height: 70rpx;
		font-size: 34rpx;
		}
		.likeTitle .bg{
			width: 7rpx;
			height: 45rpx;
			background: #FF542E;
		}
		.likeTitle .txt{
			padding-left: 10rpx;
			width: 85%;
		}
		.likeTitle .more{
			width: 15%;
			font-size: 26rpx;
			color: #7B7B7B;
		}
		.info{
			width: 100%;
			border-bottom: 2rpx solid #D8D8D8;
			padding-bottom: 20rpx;
			padding-top: 20rpx;
		}
		.info .Img{
			width: 26%;
			margin-right: 2%;
			height: 140rpx;
		}
		.info .Img image{
			border-radius: 15rpx;
			width: 100%;
			height: 100%;
		}
		.info .contentI {
			width: 50%;
			margin-right: 2%;
		}
		.info .contact{
			width: 20%;
			font-size: 28rpx;
			height: 60rpx;
			
		}
		.info .contact button{
			width: 100%;
			height: 100%;
			padding: 0;
			color: #fff;
			line-height: 60rpx;
			border-radius: 8rpx;
			margin-top: 40rpx;
		}
		.info .contact .bbg{
			font-size: 28rpx;
			background: #FF542E;
		}
		.info .contentI .ctitle{
			font-size: 34rpx;
			width: 100%;
			height: 40rpx;
		}
		.info .contentI .ctxt{
			font-size: 28rpx;
			width: 100%;
			height: 70rpx;
			overflow:hidden; /*超出部分隐藏*/
            text-overflow:ellipsis;/*显示省略号来代表被修剪的文本*/
			display:-webkit-box; 
			-webkit-box-orient:vertical;
			-webkit-line-clamp:2; 
		}
		.info .contentI .adress{
			font-size: 26rpx;
			color: #828282;
			height: 30rpx;
		}
		
		.focus{
			margin-top: 20rpx;
		}
</style>
